<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>注册</title>
	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
	<style>
		body{
			background: #f3f3f3;
		}
		.container{
			margin: 64px auto auto auto;
			width: 400px;
		}
		.title{
			text-align: center;
		}
		.login{
			margin-top: 64px;
		}
		.btn_group{
			text-align: center;
		}
	</style>
</head>
<body>

<div class="container">
	<h1 class="title">注册</h1>
	<div class="login">
		<div class="panel panel-default">
			<div class="panel-body">
				<div class="form-group" id="input1">
					<label class="control-label" for="inputError1" id="inputError1"></label>
					<input type="text" class="form-control" id="emailInput" placeholder="邮箱">
				</div>
				<div class="form-group" id="input2">
					<label class="control-label" for="inputError2" id="inputError2"></label>
					<input type="text" class="form-control" id="nameInput" placeholder="用户名">
					
				</div>
				<div class="form-group" id="input3">
					<label class="control-label" for="inputError3" id="inputError3"></label>
					<input type="password" class="form-control" id="pswInput" placeholder="密码">
					
				</div>
				<div class="form-group" id="input4">
					<label class="control-label" for="inputError4" id="inputError4"></label>
					<input type="text" class="form-control" id="verifyInput" placeholder="验证码">
					
				</div>

				<div class="btn_group">
					<div>
						<a href="javascript:;">
							<img src="captcha.do" id="captcha">
						</a>
						<br><br>
					</div>
					<button type="button" class="btn btn-primary" id="regBtn">注册</button>
					<button type="button" class="btn btn-default" id="loginBtn">去登陆</button>
				</div>
				
			</div>
		</div>
	</div>
	
</div>

<script>

function setError1(err){
	if (err.length == 0) {
		$("#input1").removeClass("has-error");
	}else{
		$("#input1").addClass("has-error");
	}
	$("#inputError1").text(err);
}

function setError2(err){
	if (err.length == 0) {
		$("#input2").removeClass("has-error");
	}else{
		$("#input2").removeClass("has-success");
		$("#input2").addClass("has-error");
	}
	$("#inputError2").text(err);
}

function setSuccess2(){
	$("#input2").removeClass("has-error");
	$("#input2").addClass("has-success");
	$("#inputError2").text('用户名可以使用');
}

function setError3(err){
	if (err.length == 0) {
		$("#input3").removeClass("has-error");
	}else{
		$("#input3").addClass("has-error");
	}
	$("#inputError3").text(err);
}
function setError4(err){
	if (err.length == 0) {
		$("#input4").removeClass("has-error");
	}else{
		$("#input4").addClass("has-error");
	}
	$("#inputError4").text(err);
}

function setDoPost(state){
	if (state) {
		$("#emailInput").attr("disabled", "disabled");
		$("#nameInput").attr("disabled", "disabled");
		$("#pswInput").attr("disabled", "disabled");
		$("#verifyInput").attr("disabled", "disabled");
		$("#regBtn").attr("disabled", "disabled");
	}else{
		$("#emailInput").removeAttr("disabled");
		$("#nameInput").removeAttr("disabled");
		$("#pswInput").removeAttr("disabled");
		$("#verifyInput").removeAttr("disabled");
		$("#regBtn").removeAttr("disabled");
	}
	
}

var nameValid = false;

function checkName(){
	var nickname = $("#nameInput").val();

	if (nickname.length	== 0) {
		nameValid = false;
		setError2('请输入用户名');
		return false;
	}

	var reg = /^([\u4e00-\u9fa5]|[a-z]|[A-Z]|[0-9]|-|_)+$/;
	var regex = new RegExp(reg);
	if (!regex.test(nickname)) {
		nameValid = false;
		setError2('昵称支持中文, 字母, 数字, -和_');
		return false;
	}

	$.post('CheckName.do',{
		nickname: nickname
	}, function(data){
		try{
			var result = JSON.parse(data);
			if (result.error == 0) {
				nameValid = true;
				// setError2('');
				setSuccess2();
				return true;
			}else{
				nameValid = false;
				setError2('用户名已被占用');
				return false;
			}
		}catch(ex){
			nameValid = false;
			setError2('出错，无法检查用户名');
			return false;
		}
		
	})
}

function doReg(){
	var email = $("#emailInput").val();
	var password = $("#pswInput").val();
	var nickname = $("#nameInput").val();
	var verify = $("#verifyInput").val();

	// 检查邮箱是否正确
	var reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
	var regex = new RegExp(reg);
	if (!regex.test(email)) {
		setError1('邮箱不正确');
		return;
	}else{
		setError1('');
	}

	// 检查昵称是否可以用
	if (!nameValid) {
		if (!checkName()) {
			return;
		}
	}else{
		setSuccess2();
	}

	// 检查密码
	if (password.length == 0) {
		setError3('请输入密码');
		return;
	}else{
		setError3('');
	}

	if (password.length < 6) {
		setError3('密码需要六位以上');
		return;
	}else{
		setError3('');
	}

	// 检查验证码
	if (verify.length == 0) {
		setError4('请输入验证码');
		return;
	}else{
		setError4('');
	}

	setDoPost(true);
	$.post('register.do',{
		email: email,
		password: password,
		nickname: nickname,
		verify: verify
	}, function(data){
		console.log(data);
		try{
			var ret = JSON.parse(data);
			switch(ret.error){
				case 0:
					window.location.href = "index.html";
					break;
				case 111:
					setDoPost(false);
					setError1('邮箱已注册');
					break;
				case 112:
					setDoPost(false);
					setError3('密码需要六位以上');
					break;
				case 113:
					setDoPost(false);
					setError3('用户名已被占用');
					break;
				case 103:
					setDoPost(false);
					setError4('验证码不正确');
					break;
				default:
					alert("系统异常，请稍后重试");
					setDoPost(false);
					break;
			}
		}catch(ex){
			alert("系统异常，请稍后重试");
			setDoPost(false);
		}
		
	})
}

$("#emailInput").keydown(function(e){  
	if (e.keyCode == 13) {
		doReg();
	}
});
$("#nameInput").keydown(function(e){  
	if (e.keyCode == 13) {
		doReg();
	}
});
$("#pswInput").keydown(function(e){  
	if (e.keyCode == 13) {
		doReg();
	}
});
$("#verifyInput").keydown(function(e){  
	if (e.keyCode == 13) {
		doReg();
	}
});

$("#regBtn").click(function(){
	doReg();
});
$("#loginBtn").click(function(){
	window.location.href = "login.html"
});

$("#captcha").click(function(){
	// 刷新验证码
	$("#captcha").attr("src", "captcha.do?r="+Math.random());
});

$("#nameInput").blur(function(){
	checkName();
})

</script>
</body>
</html>